<template>
	<view>
		<view v-for="(item,key) in cart_list" :key="key">
			<uni-list>
				<uni-list-item :thumb="item['goodspicture']" thumbSize="base">
					<template slot="body" class="temp">
						<text class="temp_text1">名称：{{item['goodsname']}}</text>
						<text class="temp_text2">价格：{{item['goodsprice']}}</text>
						<text class="temp_text3">数量：{{item['purchasenum']}}</text>
						<text class="temp_text4">规格：{{item['goodsstandard']}}</text>
					</template>
					<template slot="footer">
						<text>小计:{{item['purchasenum']*item['goodsprice']}}</text>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<view>总价:￥{{total_money}}</view>
		<view class="bottom_button">
			<view @click="placeOrder">
				<view>下单</view>
			</view>
		</view>
		<view class="bottom_empty">
			<view @click="emptyCart">
				<view>清空购物车</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex';
	export default {
		data() {
			return {
				cart_list:[],
				purchase_list:[],
				total_money:0
			}
		},
		computed: mapState(['hasLogin', 'userName','userType','purchaseNumberList']),
		methods: {
			...mapMutations(['changeCart','empty']),
			placeOrder(){
				console.log(this.purchase_list)
				this.$myRequest({
					url:'/assets/place_order/',
					data:this.purchase_list
				}).then(res=>{
					uni.showToast({
						title:'下单成功',
						icon:'success',
						success: () => {
							const eventChannel = this.getOpenerEventChannel();
							eventChannel.emit('emptyShoppingCart', {data: '下单'});
							uni.navigateBack({
								delta:1
							})
						}
					});
					console.log(res.data);
				})
			},
			emptyCart(){
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('emptyShoppingCart', {data: 'test'});
				this.empty();
				setTimeout(function(){
					uni.navigateBack({
						delta:1
					})
				},1000)
			}
		},
		onLoad(option) {
			// this.cart_list=JSON.parse(decodeURIComponent(option.cartlist));
			this.cart_list=this.purchaseNumberList;			
			let order_list=[];
			for (var index=0;index<this.cart_list.length;index++){
				let data={};
				data['cus_phone']=this.userName;
				data['shop_id']=1,
				data['goods_id']=this.purchaseNumberList[index]['goodsid'];
				data['purchase_num']=Number(this.cart_list[index]['purchasenum'])
				data['content']=null;
				data['remarks']=null;
				this.total_money+=(this.cart_list[index]['goodsprice']*this.cart_list[index]['purchasenum'])
				this.purchase_list.push(data)
			}
			console.log(this.purchase_list);
			console.log(this.total_money);
		}
	}
</script>

<style lang="scss">
	.temp{
		.temp_text1 {
				width: 100px;
				margin-right: 10px;
			    display: inline-block;
		}
		.temp_text2{
				width: 100px;
				margin-right: 10px;
			    display: inline-block;

		}
		.temp_text3{
			width: 100px;
			margin-right: 10px;
			display: inline-block;
		}
		.temp_text4{
			color: #8F8F94;
			width: 250px;
			margin-right: 10px;
			   display: inline-block;
			overflow: hidden;
			-webkit-line-clamp: 1;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}
	}
	.bottom_button {
		position: fixed;
		bottom: 0;
		height: 30px;
		line-height: 30px;
		width: 100%;
		text-align: center;
		background: yellow;
	}
	.bottom_empty{
		position: fixed;
		bottom:30px;
		height: 30px;
		line-height: 30px;
		width: 100%;
		text-align: center;
		background: yellow;
		color: red;
	}
</style>